<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	
		<style type="text/css">
			*{ padding:0; margin:0; list-style:none; border: 0;}
			.tab{ width:300px; height:300px; margin:100px auto; position: relative;}
			.tab input{ width:100px; float:left; height:50px;}
			.tab .active{ background:yellow;}
			.tab ul li{ width:300px; height:250px; text-align:center; line-height:230px; display:none;border: solid 1px ;}
			.tab .show{ display:block;}
			.tab section{ overflow:hidden;}
			.next{position: absolute;top: 50%; width: 300px;}
			.next div{display: block;height: 30px;width: 30px;background: black;cursor: pointer;color: white;font-size: 20px;}
			.next .left{float: left;text-align: center;}
			.next .right{float: right; text-align: center;}
		</style>
	</head>
	<body>
		
		<div class="tab" id="div">
			<section>
				<input class="active" type="button" value="按钮1">
				<input type="button" value="按钮2">
				<input type="button" value="按钮3">
			</section>
			
			<ul>
				<li class="show">这是第一页</li>
				<li>这是第二页</li>
				<li>这是第三页</li>
			</ul>
			<div class="next">
				<div class="left"><</div>
				<div class="right">></div>
			</div>
		</div>
		<script type="text/javascript">
			class Tadx{
			constructor(id){
				this.oDiv=document.getElementById(id);
				this.aInp=this.oDiv.getElementsByTagName("input");
				this.aDiv=this.oDiv.getElementsByTagName("li");
				this.oLeft=this.oDiv.getElementsByClassName("left");
				this.oRight=this.oDiv.getElementsByClassName("right");
				this.show();
			}
			show(){
				let _this=this;
				for(let i=0;i<this.aInp.length;i++){
					this.aInp[i].onclick=function(){
						_this.index=i
						_this.fn(i)
					}
				}
			}
			fn(i){
				for(let i=0;i<this.aInp.length;i++){
					this.aDiv[i].className="";
					this.aInp[i].className="";
				}
				this.aInp[i].className="active";
				this.aDiv[i].className="show";
				
			}
			  
		}
		class tab extends Tadx{
			constructor(id){
				super(id);
				this.tab1()
				this.index=0
			}
			tab1(){
				var _this=this
				console.log(this)
				this.oLeft[0].onclick=function(){
					_this.index--
					if(_this.index<0){
						_this.index=2
					}
					_this.fn(_this.index)
				}
				this.oRight[0].onclick=function(){
					_this.index++
					if(_this.index>2){
						_this.index=0
					}
					_this.fn(_this.index)
				}
			}
		}

			new tab("div");
		</script>
	</body>
</html>
